<template>
    <div class="index-song-list">
        <el-row>
            <el-col :span="4" v-for="item in props.playlists" :key="item.id">
                <div class="item">
                    <div class="item-img">
                        <div class="title">
                            <svg t="1705578663022" class="icon" viewBox="0 -200 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="4468" width="15" height="15">
                                <path
                                    d="M89.7 714c-10.3 0-18.6 8.3-18.6 18.6v28.7c0 10.3 8.3 18.6 18.6 18.6s18.6-8.3 18.6-18.6v-28.7c0-10.2-8.4-18.6-18.6-18.6zM958.9 554.9C954.4 311.3 755 114.5 510.4 114.5S66.4 311.3 61.9 554.9c0 0.7-0.2 1.4-0.2 2.1v88.7c0 15.4 12.5 27.9 27.9 27.9 15.4 0 27.9-12.5 27.9-27.9v-82.5c0-216.6 176.2-392.8 392.8-392.8s392.8 176.2 392.8 392.8v82.5c0 15.4 12.5 27.9 27.9 27.9 15.4 0 27.9-12.5 27.9-27.9V557c0.2-0.7 0-1.4 0-2.1zM931.1 714c-10.3 0-18.6 8.3-18.6 18.6v28.7c0 10.3 8.3 18.6 18.6 18.6s18.6-8.3 18.6-18.6v-28.7c0-10.2-8.3-18.6-18.6-18.6z"
                                    fill="#ffffff" p-id="4469"></path>
                                <path
                                    d="M314.2 585h-45c-26.5 0-48.8 18.5-54.4 43.4-45.6 17.9-72.2 59.9-72.2 118.3s26.6 100.5 72.2 118.3c5.6 24.8 27.9 43.4 54.4 43.4h45c30.8 0 55.8-25 55.8-55.8V640.9c0.1-30.9-24.9-55.9-55.8-55.9zM198.4 746.7c0-39 15.5-57 33.9-65.3v130.7c-18.4-8.3-33.9-26.4-33.9-65.4z m115.8 105.9h-44.6V645.7c0-1.3-0.1-2.5-0.4-3.7v-1.1h45v211.7zM804.6 628.4c-5.7-24.8-27.9-43.4-54.5-43.4h-45c-30.8 0-55.8 25-55.8 55.8v211.7c0 30.8 25 55.8 55.8 55.8h45c26.6 0 48.8-18.5 54.5-43.4 45.5-17.9 72.2-59.9 72.2-118.3-0.1-58.3-26.7-100.3-72.2-118.2z m-99.5 224.2V640.9h45v1.1c-0.3 1.2-0.4 2.5-0.4 3.8v206.9h-44.6z m81.9-40.5V681.4c18.4 8.3 33.9 26.4 33.9 65.3 0 39-15.5 57.1-33.9 65.4z"
                                    fill="#ffffff" p-id="4470"></path>
                            </svg>
                            {{ formartNum(item.playCount) }}/{{ item.trackCount }}首
                        </div>
                        <a @click="router.push('/playlist/detail?id=' + item.id)">
                            <el-image :src="item.coverImgUrl"></el-image>
                        </a>
                    </div>
                    <div class="item-name">{{ item.name }}</div>
                    <div>
                        <span v-for="tag in item.tags" :key="tag"><el-link @click="router.push('/playlist?cat=' + tag)"> #{{
                            tag
                        }}&nbsp; </el-link>
                        </span>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { formartNum } from '@/utils/util'

import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router';

const router = useRouter()

const props = defineProps({
    playlists: {
        typeof: Array,
        required: true
    }
})

onMounted(async () => {

})


</script>

<style lang="less" scoped>
.el-col {
    overflow: hidden;
    padding: 0 10px;

    .item {
        padding: 10px 0;
        position: relative;

        .item-img {
            overflow: hidden;

            .title {
                position: absolute;
                right: 0px;
                // height: 30px;
                text-align: right;
                padding: 10px 5px;
                // transform: translateY(50px);
                background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5));
                color: white;
                font-size: 13px;
                width: 100%;
                display: block;
                z-index: 9;
            }

            .el-image {
                border-radius: 5px;
                width: 100%;
            }

        }

        .item-name {
            font-size: 14px;
            line-height: 22px;
            color: #5d6166;
        }

        .el-link {
            color: #409eff;
        }



        &:hover .item-img {
            cursor: pointer;
            animation: jelly .5s;


        }

        &:hover .item-name {
            color: black;
        }
    }


}


@keyframes jelly {

    0%,
    100% {
        transform: scale(1, 1);
    }

    25%,
    75% {
        transform: scale(0.98, 1.02);
        // width: 200px;
    }

    50% {
        transform: scale(1.02, 0.98);
    }
}
</style>